<div id="content-title">Add Class Details</div>

<script id="demo" type="text/javascript">
$(document).ready(function() {
	// validate signup form on keyup and submit
	var validator = $("#class-form").validate({
		rules: {
			
		year: {
			required: true,
			maxlength:4,
			minlength:4
		},
		grade: {
			required: true,
			maxlength:2 
		},
		term: {
			required: true,
			number:true,
			maxlength: 1
		},
		class: {
			required: true
		}
		
	},
	messages: {
			
		year: {
			required: "Please provide a Year",
			maxlength: "Year must consist of at least 4 numbers",
			minlength:"Year must consist of at least 4 characters"
		},
		grade: {
			required: "Please provide a Grade",
			maxlength: "Grade must not grater than 2 characters"
		},
		term: {
			required: "Please provide a Term",
			number: "You should enter numbers",
			maxlength: "Term must be not grater than 1 thancharacters"
		},
		class: {
			required: "Please provide a Class"
		}
	},
	// the errorPlacement has to take the table layout into account
	errorPlacement: function(error, element) {
		if ( element.is(":radio") )
			error.appendTo( element.parent().next().next() );
		else if ( element.is(":checkbox") )
			error.appendTo ( element.next() );
		else
			error.appendTo( element.parent().next() );
	},
});
// check if confirm password is still valid after password changed
$("#teacherPass").blur(function() {
	$("#teacherConfirmPass").valid();
});

});
</script>

<div id="content-data">
<div class="web-form">
<form name="class-form" id="class-form" method="post"
	action="./system/addClass.php">
<fieldset><legend class="left">Add class</legend>
<table border="0" bordercolor="" width="" bgcolor="">

	<tbody>
		<tr>
			<td colspan="3"><?php if($_SESSION['log-err'])echo "<div class='log-err'>".$_SESSION['log-err']."</div>"; ?>
			<?php if($_SESSION['log-info'])echo "<div class='log-info'>".$_SESSION['log-info']."</div>"; ?>
			</td>
		</tr>

		<tr>
			<td class="left"><label class="web-form-label">Year :</label></td>
			<td class="right"><input type="text" name="year" id="year"
				class="web-form-field" /></td>
			<td class="left">
			<div id="year-log" class="log-err"></div>
			</td>
		</tr>
		<tr>
			<td class="left"><label class="web-form-label">Grade :</label></td>
			<td class="right"><input type="text" name="grade" id="grade" 
				class="web-form-field" /></td>
			<td class="left">
			<div id="grade-log" class="log-err"></div>
			</td>
		</tr>

		<tr>
			<td class="left"><label class="web-form-label">Term :</label></td>
			<td class="right"><input type="text" name="term" id="term"
				class="web-form-field" /></td>
			<td class="left">
			<div id="term-log" class="log-err"></div>
			</td>
		</tr>

		<tr>
			<td class="left"><label class="web-form-label">Class :</label></td>
			<td class="right"><input type="text" name="class" id="class"
				class="web-form-field" /></td>
			<td class="left">
			<div id="year-log" class="log-err"></div>
			</td>
		</tr>


		<tr>
			<td></td>
			<td class="right">
			<button type="submit" class="web-form-button"><img
				src="./public/images/usersadd.png"><span>Add Class</span></button>
			</td>
		</tr>
	</tbody>
</table>
</fieldset>
</form>
</div>
</div>
